<template>
    <view class="wrap" @click="itemClick">

        <view class="cover">
            <image :src="itemData.modelUrl | mmvImageUrl" mode="aspectFill"></image>
        </view>

        <view class="hot-tags">
            <text class="red" v-if="isHot">热门</text>
            <text v-for="(hotItem, hotIndex) in hotTags" :key="hotIndex" :class="{'red':hotItem=='推荐奖励'}" @click.stop="tagClick(hotItem)">
                {{hotItem}}
            </text>
        </view>

        <view class="content">
            <!-- <view> -->
                <view class="title">{{filterNull(itemData.brandName)+" "+filterNull(itemData.seriesName)}}</view>
                <view class="tags" v-if="itemData.tagNames">
                    <view class="tag" v-for="(tagItem, tagIndex) in strSplit(itemData.tagNames)" :key="tagIndex">
                        {{tagItem}}
                    </view>
                </view>
				<view v-else style="height: 40rpx;">
					
				</view>
            <!-- </view> -->
            <view>
                <view class="desc">说明：{{filterNull(itemData.carModelRemark)}}</view>

                <view style="display: flex;flex-direction: column;align-items: flex-end;" v-if="itemData.schemeType==2||itemData.schemeType==3||itemData.schemeType==4">
					
					<text class="price">{{itemData.schemeType==2?"整备费":itemData.schemeType==4?"首付":"保证金"}}：¥{{filterNull(itemData.busAmount)}}元/起</text>
					<text class="price">月租金：¥{{filterNull(itemData.monthlyRent)}}元/起</text>
				</view>
                <view class="price" v-else>市场指导价：¥{{filterNull(itemData.guidePrice)}}万/起</view>

            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        itemData: {
            type: Object,
            default: () => { }
        },
        //是否是试驾列表
        isTestDrive: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        isHot() {
            return this.itemData.isPopularCarRental == 0 && this.itemData.schemeType != 1;
        },
        hotTags() {
            var tags = [];

            if (this.itemData.yxFlag > 0) {
                tags.push('推荐奖励')
            }

            // if (this.itemData.isPopularCarRental == 0 && this.itemData.schemeType != 1) {
            //     tags.push('热门')
            // }

            if (this.itemData.schemeTypeStr) {
                tags.push(this.itemData.schemeTypeStr)
            }

            if (this.isTestDrive && this.itemData.sourceDriverCount) {
                tags.push(this.itemData.sourceDriverCount + "人试驾")
            }

            return tags;
        }
    },
    methods: {
        itemClick() {
            this.$emit('itemClick');
        },

        strSplit(str) {
            if (str !== '' && str != undefined) {
                return str.split(',')
            } else {
                return []
            }
        },
		
		tagClick(text){
			if(text=='推荐奖励'){
				uni.showModal({
					content:this.itemData.yxStr,
					showCancel:false
				})
			}
		}

    }
}
</script>

<style lang="scss" scoped>
.wrap {
    height: 285upx;
    border-radius: 16upx;
    padding: 15upx 6upx;
    box-sizing: border-box;
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20upx;
    background: #fff;
	box-shadow: 3upx 3upx 15upx #FBFBFB, -3upx -3upx 15upx #f8f7f7;
}

.tag {
    padding: 0 14upx;
    line-height: 44upx;
    background: #eb314f;
    background: #ffad1f;
    border-radius: 6upx;
    font-size: 20upx;
    font-weight: bold;
    color: #fff;

    & + & {
        margin-left: 10upx;
    }
}

.hot {
    flex-shrink: 0;
    position: absolute;
    left: 0;
    top: 37upx;
    z-index: 2;
    border-radius: 0px 6px 6px 0px;
}

.cover {
    flex-shrink: 0;
    width: 305upx;
    height: 229upx;
    // height: 100%;
    position: relative;

    image {
        width: 100%;
        height: 100%;
        border-radius: 10upx;
    }

    .num {
        // width: 121px;
        line-height: 34upx;
        text-align: center;
        border: 1upx solid #bebebe;
        border-radius: 2upx;
        font-size: 20upx;
        font-weight: bold;
        color: #232323;
        position: absolute;
        top: 32upx;
        right: 0;
        background: #fff;
        padding: 0 11upx;
    }
}

.content {
    box-sizing: border-box;
    padding: 6upx 26upx 26upx;
    height: 100%;
    text-align: right;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;

    .tags {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
  //       height: 100upx;
		// min-height: 26rpx;
        // margin-top: 4upx;
        // overflow: hidden;

        .tag {
            margin-top: 5upx;
            height: 43upx;
            background-color: #12baa4;
        }

        .tag:nth-child(even) {
            background: #f17559;
        }
    }

    .title {
        font-size: 30upx;
        font-weight: bold;
        color: #333;
    }

    .desc {
        font-size: 20upx;
        font-weight: bold;
        color: #999;
		margin-top: 6rpx;
    }

    .price {
        font-size: 22upx;
        font-weight: bold;
        color: #ec4863;
		margin-top: 5rpx;
    }
}

.hot-tags {
    position: absolute;
    top: 22upx;
    left: -5upx;
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 310upx;

    text {
        @include flex;
        align-items: center;
        flex-wrap: wrap;
        line-height: 43upx;
        margin: 10upx 10upx 0 0;
        padding: 0 10upx;
        border-radius: 6upx;
        font-size: 20upx;
        color: $white;
        // background-color: #eb314f;
        background: #ffad1f;
    }

    .red {
        background: #eb314f;
    }

    text:first-child {
        border-radius: 0 6upx 6upx 0;
    }

    // text:nth-child(even) {
    //     background: #ffad1f;
    // }
}

.green {
    background: #12baa4;
}

.red {
    background: #eb314f;
}

.yellow {
    background: #f17559;
}
</style>
